<template>
    <div class="wrapper">
        <van-nav-bar safe-area-inset-top placeholder>
            <template #title>
                <van-col>
                    <van-icon name="points" size="20" color="red" />
                </van-col>
                <van-col>我的收藏</van-col>
            </template>
        </van-nav-bar>


        <van-row class="top-button-container">
            <van-col :span="4" :offset="3">
                <!-- <van-button plain size="medium" icon='el-icon-delete' type="danger" @click="onClear">清空</van-button> -->
                <el-popconfirm confirm-button-text='好的' cancvan-button-text='不用了' icon="el-icon-info" icon-color="red"
                    title="该操作会永久清空所有已收藏的内容" @confirm="onClear">
                    <van-button slot="reference" plain :loading="loading" type="danger" size="medium" icon='delete-o'>清空
                    </van-button>
                </el-popconfirm>
            </van-col>
            <van-col :span="4" :offset="1">
                <van-button plain :loading="loading" size="medium" icon='replay' type="primary" :disabled="!affixList"
                    @click="onReflush">刷新</van-button>
            </van-col>
            <van-col :span="4" :offset="1">
                <van-button plain :loading="loading" size="medium" icon='replay' type="primary"
                    @click="permSwitch = !permSwitch">排列切换
                </van-button>
            </van-col>
            <van-col :span="4" :offset="1">
                <van-button plain :loading="loading" size="medium" icon='replay' type="primary"
                    @click="digiteSwitch = !digiteSwitch">
                    数字切换</van-button>
            </van-col>
        </van-row>

        <van-divider />

        <!-- 模拟加载loading 和 暂无数据-->
        <el-table v-loading="loading" :data="favorite_list"></el-table>

        <div class="result-container" :center="false">
            <compare-item v-for="(item) in favorite_list" :digiteSwitch="digiteSwitch" :permSwitch="permSwitch"
                :item="item">
                <template #buttons-2>

                    <!-- 收藏按钮： 添加收藏 -->
                    <van-button v-if="!item.favorited" plain type="danger" @click="onResultAddFavorite(item)"
                        icon="like-o" />

                    <!-- 收藏按钮:  取消按钮 -->
                    <el-popconfirm v-if="item.favorited" confirm-button-text='是的' cancvan-button-text='不用了'
                        icon="el-icon-info" icon-color="red" title="确定要取消收藏吗?" @confirm="onResultAddFavorite(item)">
                        <van-button slot="reference" type="danger" plain size="medium" icon='like' />
                    </el-popconfirm>

                    <van-button type="danger" icon="search" plain @click="onGroupView(item)" />
                    <van-button type="danger" icon="plus" :plain="!item.compared" @click="onResultAddCompare(item)" />
                    <van-button type="danger" icon="share-o" plain @click="toShare(item)" />
                </template>
            </compare-item>
        </div>


        <!-- 查看结果弹出层 -->
        <van-popup v-model="calcResultSingleShow" round>
            <calc-result-view ref="crv" :calcResult="calcResult" :affixOptions="affixOptions" :affixList="affixList"
                v-on:crvClose="calcResultSingleShow = false"
                v-on:engrView="onResultViewSelectEngr" v-on:addFavorite="onResultAddFavorite">
                <!-- <template #right-btn>
                    <div @click="onResultAddFavorite(calcResult)" style="color:#1989fa;">
                        <van-icon :name="calcResult.favorited ? 'like' : 'like-o'" />
                        &nbsp;{{ calcResult.favorited | favoriteButtonText }}
                    </div>
                </template> -->
                <template #bottom-btn>
                    <van-button icon="plus" plain type="primary" @click="onResultAddCompare(calcResult)">
                        {{ calcResult.compared ? '已加入' : '对比' }}</van-button>

                    <van-button icon="share-o" plain type="warning" @click="$refs.crv.onShare()">分享</van-button>

                    <van-button icon="cluster" plain type="info" @click="onResultShowWeightsView(calcResult)">权重表
                    </van-button>

                    <!-- <van-button :icon="calcResult.favorited ? 'like' : 'like-o'" plain type="danger"
                        @click="onResultAddFavorite(calcResult)">{{ calcResult.favorited | favoriteButtonText }}
                    </van-button> -->
                </template>
            </calc-result-view>
        </van-popup>

        <!-- 弹出层->刻印详情 -->
        <engr-view :engrViewShow="engrViewShow" :engrViewData="engrViewData" :affixOptions="affixOptions"
            :affixList="affixList" v-on:close="engrViewShow = false" />

        <!-- 弹出层->查看权重表 -->
        <weights-view :isWeightsViewShow="isWeightsViewShow" :weightsResult="weightsResult" :affixList="affixList"
            :affixOptions="affixOptions" v-on:close="isWeightsViewShow = false" />
    </div>
</template>

<script>
import { Toast, Notify } from 'vant';
import { CalcServer } from '../server/servers';
import EngrView from './popups/EngrView';
import CalcResultView from './CalcResultView';
import WeightsView from './popups/WeightsView';
import CompareItem from './CompareItem'
let vm;

export default {
    name: 'MyFavorite',

    components: {
        EngrView, CalcResultView, WeightsView, CompareItem
    },

    computed: {
        affixList() {
            return this.$store.state.affixList;
        },

        affixOptions() {
            return this.$store.state.affixOptions;
        },

        compare_list() {
            return this.$store.state.compare_list;
        },

        calc_list() {
            return this.$store.state.calc_list;
        },

        store_favorited_list() {
            return this.$store.state.favorited_list;
        }
    },

    watch: {
        $route(to, from) {
            if (to.path == '/MyFavorite') {
                //本页面被激活
                this.getDataList && this.getDataList();
            }
        },

        // favorite_list(val) {
        // }
    },

    beforeCreate() {
        vm = this;
    },

    created() {
        // const loading = this.$loading({
        //     lock: true,
        //     text: 'Loading',
        //     spinner: 'el-icon-loading',
        //     background: 'rgba(0, 0, 0, 0.7)'
        // });

        //停留两秒 给sql初始化的时间
        setTimeout(() => {
            vm.getDataList();
            vm.loading = false;
            // loading.close();
        }, 2000); //time可以设置的大一点
    },

    filters: {
        favoriteButtonText(flag) {
            return flag ? '已收藏' : '收藏';
        },
    },

    data() {
        return {
            loading: true,
            favorite_list: [],
            affixWeight: null,
            digiteSwitch: false, //数字和罗马数字切换
            permSwitch: false, //六角和双排切换

            calcResultSingleShow: false,
            calcResult: null,

            engrViewShow: false,
            engrViewData: null,

            isWeightsViewShow: false,
            weightsResult: null,
        }
    },

    methods: {

        getDataList() {
            this.favorite_list = CalcServer.queryAllFavorites();
            this.$store.commit("syncFavoritedList", this.favorite_list);

            //页面联动 查找compare_list中是否存在
            this.favorite_list.forEach(e => {
                this.compare_list.some(e1 => {
                    if (e1.id == e.id) {
                        e.compared = true;
                        return true;
                    }
                })
            });
        },

        //分享
        toShare(item) {
            this.calcResult = item;
            this.calcResultSingleShow = true;
            this.$nextTick().then(()=>{
                this.$refs.crv.onShare();
            })
        },

        onReflush() {
            this.favorite_list = [];
            this.loading = true;
            //延迟1秒防止闪眼
            setTimeout(() => {
                console.log("MyFavorite.vue 页面刷新");
                vm.getDataList();
                this.loading = false;
                // vm.$forceUpdate();
            }, 1000);
        },

        onClear() {
            this.favorite_list.forEach(e => {
                //页面联动,查找calc_list,compare_list中的该对象，设置favorited =false
                //注意收藏页面的对象 和对比、计算页面的对象不是同一个，只能通过id比较
                this.calc_list.some(e1 => {
                    if (e1.id == e.id) {
                        e1.favorited = false;
                        return true;
                    }
                });

                this.compare_list.some(e1 => {
                    if (e1.id == e.id) {
                        e1.favorited = false;
                        return true;
                    }
                });
            });

            CalcServer.removeAllFavorited();
            this.getDataList();
        },

        onGroupView(item) {
            console.log("MyFavrite.vue onGroupView",item);
            this.calcResult = item;
            this.calcResultSingleShow = true;
        },

        onResultViewSelectEngr(item) {
            this.engrViewData = item;
            this.engrViewShow = true;
        },

        onResultAddFavorite(item) {
            console.log("MyFavorite.vue", "点击了收藏3", item);

            if (item.favorited) {
                //取消收藏
                let rs = CalcServer.removeFavorited(item)
                if (rs.code == 0) {
                    this.getDataList();

                    //页面联动,查找calc_list,compare_list中的该对象，设置favorited =false
                    //注意收藏页面的对象 和对比、计算页面的对象不是同一个，只能通过id比较
                    this.calc_list.some(e1 => {
                        if (e1.id == item.id) {
                            e1.favorited = false;
                            return true;
                        }
                    });

                    this.compare_list.some(e1 => {
                        if (e1.id == item.id) {
                            e1.favorited = false;
                            return true;
                        }
                    });
                } else {
                    console.log("取消收藏失败", rs);
                }
            }
        },

        //@TODO 可能有问题
        onResultAddCompare(item) {
            if (item.compared) {
                Notify({ message: '\n不能重复添加哦', type: 'warning' ,duration:2000});
                return;
            }

            if (!item.name) {
                item.name = '临时方案';
            }

            item.compared = true;
            this.$store.commit('pushComperList', item);
            Notify({ message: '\n添加成功', type: 'success' });
        },

        onResultShowWeightsView(item) {
            console.log("Compare.vue", 'onResultShowWeightsView', item);
            if (!item.weightId || item.weightId == "") {
                Notify({ type: 'warning', message: "\n该记录没有关联权重表哦" ,duration:2000});
                return
            }

            let rs = CalcServer.queryWeightsById(item.weightId);

            if (!rs) {
                Notify({ type: 'warning', message: "\n权重表已被删除" ,duration:2000});
                return
            }

            this.weightsResult = rs;
            this.isWeightsViewShow = true;
            console.log("查看关联权重表", rs);
        }
    }
}
</script>

<style scoped>
.top-button-container .van-button {
    width: 100%;
    height: 35px;
    margin-bottom: -6px;
    font-size: 12px;
}

.result-container {
    width: 99%;
    height: 86%;
    /* height: 635px; */
    overflow-y: auto;
    overflow-x: hidden;
}
</style>